{% extends 'pages/__base.html' %}

{% block __base %}
{% from 'tools/card.html' import nonModal %}

{% set form_html %}
    <form method="POST" id="registerForm">
        <div class="input-group mb-3">
            <input class="form-control" placeholder="用户名" name="username" id="username">
        </div>
        <div class="input-group mb-3">
            <input type="password" class="form-control" placeholder="输入密码" name="password" id="password">
        </div>
        <div class="input-group mb-3">
            <input type="password" class="form-control" placeholder="再次输入密码" name="password1" id="password1">
        </div>
        <div class="row">
            <div class="col-4">
                <a class="btn btn-primary btn-block" href="{{ url_for('auth.get_public_page_of_login') }}">返回</a>
            </div>
            <div class="col-4">
                <button type="submit" class="btn btn-primary btn-block" id="submitBtn">确认注册</button>
            </div>
        </div>
    </form>


   <script>
       let registerForm = getElementById('registerForm')

       function validateInput(username, password) {
        const usernameRegex = /^[A-Za-z0-9]{8,}$/;  // 仅允许大小写字母和数字，且不少于8位
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        if (!usernameRegex.test(username)) {
            flash("用户名必须不少于8位，只能包含大小写字母和数字！", "danger");
            return false;
        }
        if (!passwordRegex.test(password)) {
            flash("密码必须包含至少一个大写字母、一个小写字母、一个特殊字符和一个数字，且不少于8位！", "danger");
            return false;
        }
        return true;
    }


        Event(registerForm,'submit',()=>{

        const data = packDataById('username','password','password1');
        if(data.password !== data.password1) {
            flash("两次输入的密码不一致，请重新输入！", "danger")
            return;
        }

         if (!validateInput(data.username, data.password)) {
            return;
        }

        delete data.password1;

        fetchPost("{{ url_for('auth.post_public_service_of_register') }}", data).then(json => {
            flash(json.msg)
        })
    })

</script>

{% endset %}

    <div class="login-page"><div class="login-box">
    {{ nonModal(head='<h4>注册</h4>' | safe,
        body=form_html,collapse=False) }}
    </div></div>

{% endblock %}